<template>
  <div ref="webgl" class="webgl">
    <control v-if="model" :model="model"></control>
    <car-tag
      :model="model"
      v-for="(obj, i) in carArr"
      :key="i"
      :car="obj"
    ></car-tag>
  </div>
</template>

<script setup name="ThreeCanvas">
import { ref, onMounted, onBeforeUnmount, shallowRef, watch } from "vue";
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
// DRACOLoader解析Draco压缩过的gltf模型
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
import { CSS3LabelRenderer } from "./ThreeBase/CSS3DRenderer.js";
import "./ThreeBase/RenderLoop.js"; //调用渲染循环，threejs输出Canvas画布渲染动画
import control from "./Control.vue";
import { renderer } from "./ThreeBase/renderer";
import { scene } from "./ThreeBase/scene.js";
import CarTag from "./CarTag.vue"; //车辆可视化

// 定义一个 DOM 引用
const webgl = ref(null);
const model = ref(null);
const fileNum = ref(0); //已加载车模型数量
const carGltfArr = shallowRef([]); //车模型数组
const carBool = ref(false); //是否开始放车
const carArr = ref([]); //场景中所有车的数组

watch(carBool, (val) => {
  const carType = ["大货车", "警车", "救护车", "客车", "消防车", "小货车"];
  const numArr = [
    "豫N·55666",
    "京A·53466",
    "苏B·55556",
    "鲁C·51266",
    "苏D·33456",
    "鲁A·57826",
  ];
  const nameArr = ["武大郎", "宋江", "武松", "林冲", "镇关西", "鲁智深"];
  let num = 1;
  setTimeout(function () {
    setInterval(function () {
      const carIndex = Math.floor(Math.random() * 6); //随机选择一辆车，并设置车的类型
      const car = carGltfArr.value[carIndex].clone();
      // car.carType = carType[carIndex];//车辆的类型
      car.carType = carGltfArr.value[carIndex].name; //车辆的类型
      num += 1;
      if (num == 8) num = 2;
      car.order = num; //所在车道
      car.num = numArr[Math.floor(Math.random() * 6)]; //车牌号
      car.driverName = nameArr[Math.floor(Math.random() * 6)]; //驾驶员姓名
      car.state = Math.random() > 0.5 ? "正常" : "异常"; //状态
      carArr.value.push(car);
    }, 2000);
  }, 6000);

  setTimeout(function () {
    const car = carGltfArr.value[1].clone();
    car.order = 3; //所在车道
    car.num = "京A·53466"; //车牌号
    car.driverName = "宋江"; //驾驶员姓名
    car.carType = carGltfArr.value[1].name; //车辆类型
    car.state = "异常"; //状态
    carArr.value.push(car);
  }, 1000);
  setTimeout(function () {
    const car = carGltfArr.value[3].clone();
    car.order = 4; //所在车道
    car.num = "豫N·55666"; //车牌号
    car.driverName = "武大郎"; //驾驶员姓名
    car.carType = carGltfArr.value[3].name; //车辆类型
    car.state = "正常"; //状态
    carArr.value.push(car);
  }, 200);
  setTimeout(function () {
    const car = carGltfArr.value[2].clone();
    car.order = 5; //所在车道
    car.num = "苏B·55556"; //车牌号
    car.driverName = "武松"; //驾驶员姓名
    car.carType = carGltfArr.value[2].name; //车辆类型
    car.state = "正常"; //状态
    carArr.value.push(car);
  }, 500);
  setTimeout(function () {
    const car = carGltfArr.value[4].clone();
    car.order = 6; //所在车道
    car.num = "鲁C·51266"; //车牌号
    car.driverName = "林冲"; //驾驶员姓名
    car.carType = carGltfArr.value[4].name; //车辆类型
    car.state = "异常"; //状态
    carArr.value.push(car);
  }, 1000);
});

watch(fileNum, (val) => {
  if (val === 6) {
    carBool.value = true;
  }
});

onMounted(() => {
  const modelGltf = new THREE.Group(); //声明一个组对象，用来添加加载成功的三维场景
  scene.add(modelGltf); //model添加到场景中
  // threejs渲染结果canvas画布布局
  webgl.value.appendChild(renderer.domElement);
  webgl.value.appendChild(CSS3LabelRenderer.domElement);

  // DRACOLoader解析Draco压缩过的gltf模型
  const dracoLoader = new DRACOLoader();
  dracoLoader.setDecoderPath("/libs/dracogltf/");
  const loader = new GLTFLoader();
  loader.setDRACOLoader(dracoLoader);
  loader.load("/收费站Draco.glb", function (gltf) {
    modelGltf.add(gltf.scene); //gltf.scene添加到组对象中
    model.value = modelGltf;
  });

  const fileArr = ["大货车", "警车", "救护车", "客车", "消防车", "小货车"];
  for (let i = 0; i < fileArr.length; i++) {
    loader.load("/车/" + fileArr[i] + "Draco.glb", function (gltf2) {
      fileNum.value += 1;
      carGltfArr.value.push(gltf2.scene);
      gltf2.scene.name = fileArr[i]; //文件名作为车name的属性值
    });
  }
});

onBeforeUnmount(() => {});
</script>

<style scoped>
.webgl {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  position: relative;
}
</style>
